<template>
  <div class="bgimg">
    <div class="bac">
      <div class="reg_top row">
        <div class="col-xs-8">
          <div class="row" style="margin-left: 305px; margin-top: 30px">
            <div class="top_font_left">官网</div>
            <div class="top_font_left" style="width: 80px">ColorOS</div>
            <div class="top_font_left">云服务</div>
          </div>
        </div>
        <div class="top_font_div col-xs-2">
          <div class="row" style="margin-top: 30px">
            <div class="col-xs-1"></div>
            <div class="cen_help col-xs-3">帮助中心</div>
            <div class="chinese col-xs-6">
              <select class="font">
                <option>简体中文</option>
                <option>繁體中文</option>
                <option>English</option>
              </select>
            </div>
            `
            <div class="col-xs-1"></div>
          </div>
        </div>
        <div class="col-xs-2"></div>
      </div>
      <div class="reg_main">
        <div class="log_main_top">
          <div class="OPPO row">
            <div class="col-xs-5"></div>
            <div class="col-xs-2" style="text-align: center; font-size: 42px">
              OPPO
            </div>
            <div class="col-xs-5"></div>
          </div>
          <div style="text-align: center">登录欢太帐号可享受更多的服务</div>
        </div>
        <div class="log_main_cen">
          <div class="login_div">
            <div class="log_font_div">
              <div
                style="
                  padding: 10px 0 30px;
                  margin: 0;
                  font-size: 26px;
                  line-height: 37px;
                  font-weight: 500;
                  text-align: center;
                "
              >
                账号登录
              </div>

              <div
                style="width: 100%; height: 240px; position: relative"
                id="box_one"
              >
                <div
                  style="
                    width: 100%;
                    float: left;
                    height: 34px;
                    margin-bottom: 10px;
                  "
                >
                  <div
                    style="
                      float: left;
                      font-size: 16px;
                      color: #000;
                      line-height: 22px;
                      width: 50%;
                      text-align: center;
                      margin-top: 6px;
                      cursor: pointer;
                    "
                  >
                    短信验证码登陆
                  </div>
                  <div
                    style="
                      float: left;
                      font-size: 16px;
                      color: rgba(0, 0, 0, 0.5);
                      line-height: 22px;
                      width: 0.3%;
                      margin-top: 4px;
                    "
                  >
                    |
                  </div>
                  <div
                    style="
                      float: left;
                      font-size: 16px;
                      color: rgba(0, 0, 0, 0.5);
                      line-height: 22px;
                      width: 49%;
                      text-align: center;
                      margin-top: 6px;
                      cursor: pointer;
                    "
                    id="palo"
                  >
                    密码登录
                  </div>
                </div>
                <div
                  class="box"
                  style="width: 100%; float: left; background-color: #f7f7f7"
                >
                  <input
                    type="text"
                    style="
                      width: 100%;
                      height: 100%;
                      border: 0;
                      background-color: #f7f7f7;
                      font-size: 12px;
                    "
                    placeholder="请输入手机号码或邮箱"
                  />
                </div>
                <div class="box" style="width: 100%; float: left; padding: 0">
                  <input
                    type="text"
                    class="box"
                    style="
                      background-color: #f7f7f7;
                      width: 200px;
                      float: left;
                      margin: 0;
                      padding: 0;
                      border: 0;
                      font-size: 12px;
                      padding: 10px 15px;
                      cursor: not-allowed;
                    "
                    placeholder="请输入验证码"
                    autocomplete="off"
                  />
                  <div
                    class="box"
                    style="
                      width: 90px;
                      float: left;
                      margin-left: 10px;
                      text-align: center;
                      background-color: #d9d9d9;
                      color: #fff;
                      font-size: 12px;
                      margin-top: 0;
                      padding: 15px 15px;
                      cursor: not-allowed;
                    "
                  >
                    获取验证码
                  </div>
                </div>
                <div style="width: 100%; float: left; height: 60px; bottom: 0">
                  <div
                    style="
                      display: grid;
                      width: 100%;
                      height: 50px;
                      bottom: 0;
                      background-color: #2ad181;
                      opacity: 0.3;
                      cursor: not-allowed;
                      border-radius: 10px;
                      margin-top: 40px;
                    "
                  >
                    <div
                      style="
                        justify-self: center;
                        align-self: center;
                        color: #fff;
                      "
                    >
                      登录
                    </div>
                  </div>
                </div>
              </div>

              <div
                style="
                  width: 100%;
                  height: 268px;
                  position: relative;
                  display: none;
                "
                id="box_two"
              >
                <div
                  style="
                    width: 100%;
                    float: left;
                    height: 34px;
                    margin-bottom: 10px;
                  "
                >
                  <div
                    style="
                      float: left;
                      font-size: 16px;
                      color: rgba(0, 0, 0, 0.5);
                      line-height: 22px;
                      width: 50%;
                      text-align: center;
                      margin-top: 6px;
                      cursor: pointer;
                    "
                    id="duanlo"
                  >
                    短信验证码登陆
                  </div>
                  <div
                    style="
                      float: left;
                      font-size: 16px;
                      color: rgba(0, 0, 0, 0.5);
                      line-height: 22px;
                      width: 0.3%;
                      margin-top: 4px;
                    "
                  >
                    |
                  </div>
                  <div
                    style="
                      float: left;
                      font-size: 16px;
                      color: #000;
                      line-height: 22px;
                      width: 49%;
                      text-align: center;
                      margin-top: 6px;
                      cursor: pointer;
                    "
                  >
                    密码登录
                  </div>
                </div>
                <div
                  class="box"
                  style="width: 100%; float: left; background-color: #f7f7f7"
                >
                  <input
                    type="text"
                    style="
                      width: 100%;
                      height: 100%;
                      border: 0;
                      background-color: #f7f7f7;
                      font-size: 12px;
                    "
                    placeholder="请输入手机号码或邮箱"
                  />
                </div>
                <div
                  class="box"
                  style="width: 100%; float: left; background-color: #f7f7f7"
                >
                  <input
                    type="password"
                    style="
                      width: 100%;
                      height: 100%;
                      border: 0;
                      background-color: #f7f7f7;
                      font-size: 12px;
                    "
                    placeholder="请输入密码"
                  />
                </div>
                <div
                  style="
                    float: left;
                    width: 100%;
                    height: 46px;
                    font-size: 12px;
                    margin-top: 10px;
                    margin-left: 5px;
                    cursor: pointer;
                  "
                >
                  忘记密码
                </div>
                <div
                  style="
                    width: 100%;
                    float: left;
                    height: 60px;
                    bottom: 0;
                    margin-top: 15px;
                  "
                >
                  <div
                    style="
                      display: grid;
                      width: 100%;
                      height: 50px;
                      bottom: 0;
                      background-color: #2ad181;
                      opacity: 0.3;
                      cursor: not-allowed;
                      border-radius: 10px;
                    "
                  >
                    <div
                      style="
                        justify-self: center;
                        align-self: center;
                        color: #fff;
                      "
                    >
                      登录
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="reg_bot">
        <div
          style="
            align-self: center;
            justify-self: center;
            font-size: 12px;
            color: #9b9b9b;
          "
        >
          © 2005 - 2021 广东欢太 版权所有 粤ICP备 14056724 号-2
          联系方式：4001-999-666
        </div>
      </div>
    </div>

    <div
      style="
        width: 300px;
        height: 28px;
        position: absolute;
        left: 620px;
        top: 590px;
      "
      id="div_one"
    >
      <div
        style="float: left; font-size: 12px; margin-top: 10px; cursor: pointer"
      >
        隐私政策
      </div>
      <div class="regist" id="regist">注册账号</div>
    </div>
  </div>
</template>

<script>
/*
var reg = document.getElementById('regist')
// 点击跳转到注册页面
reg.onclick = function () {
  window.location.replace('register.html')
}
var boxOne = document.getElementById('box_one')
var boxTwo = document.getElementById('box_two')
var palo = document.getElementById('palo')
var duanlo = document.getElementById('duanlo')
var divOne = document.getElementById('div_one')
palo.onclick = function () {
  boxOne.style.cssText = 'display:none'
  boxTwo.style.cssText = 'display:block'
  divOne.style.cssText =
    'width:300px;height:28px;position: absolute;left: 620px;top: 620px;'
}
duanlo.onclick = function () {
  boxOne.style.cssText = 'display:block'
  boxTwo.style.cssText = 'display:none'
  divOne.style.cssText =
    'width:300px;height:28px;position: absolute;left: 620px;top: 590px;'
}
*/
export default {}
</script>

<style lang="scss">
.bgimg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-width: 1000px;
  background: url('@/assets/images/log_bac.png');
  background-size: cover;
  -webkit-background-size: cover;
}
.bac {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  position: absolute;
}
.reg_top {
  height: 78px;
  width: 100%;
  /* background-color: #bbe8f2; */
  float: left;
}

.reg_main {
  height: 596px;
  width: 100%;
  float: left;
}
.reg_bot {
  height: 56px;
  width: 100%;
  float: left;
  display: grid;
}
.top_font_div {
  height: 100%;
  margin: 0;
  padding: 0;
  width: 250px;
}
.row {
  margin: 0;
  padding: 0;
}
.cen_help {
  height: 100%;
  color: #7f7f7f;
  font-size: 14px;
  margin-left: 0.75rem;
  cursor: pointer;
  transition: opacity 0.34s cubic-bezier(0, 0, 0.2, 1) 0s;
  margin: 0;
  padding: 0;
  text-align: center;
  position: relative;
}
.cen_help:hover {
  color: #bfbfbf;
  transition: all 0.3s;
}
.chinese {
  height: 100%;
  margin-left: 0.75rem;
  margin: 0;
  padding: 0;
  text-align: center;
  position: relative;
}
.font {
  font-size: 14px;
  cursor: pointer;
  color: #7f7f7f;
  transition: all 0.3s;
  border: 0;
  background: transparent;
}
.font:hover {
  color: #bfbfbf;
}
.top_font_left {
  float: left;
  font-size: 14px;
  width: 60px;
  color: #7f7f7f;
  cursor: pointer;
}
.top_font_left:hover {
  color: #bfbfbf;
  transition: all 0.3s;
}
.log_main_top {
  width: 100%;
  height: 105px;
}
.OPPO {
  height: 60px;
  margin-top: 42px;
  /* width: 180px; */
  width: 100%;
}
.log_main_cen {
  width: 100%;
  height: 424px;
  display: grid;
}
.login_div {
  justify-self: center;
  width: 380px;
  height: 100%;
  background-color: #fff;
  padding: 40px;
}
.log_font_div {
  width: 100%;
  height: 76px;
}
.box {
  height: 46px;
  width: 400px;
  border-radius: 8px;
  padding: 10px 15px;
  margin: 0;
  margin-top: 10px;
}
input {
  outline: none;
}
input::placeholder {
  color: #b2b2b2;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  /*背景颜色*/

  box-shadow: 0 0 0 60px #f7f7f7 inset;
  /*字的颜色*/
  -webkit-text-fill-color: #000;
  font-size: 12px;
}
.regist {
  float: right;
  font-size: 12px;
  margin-top: 10px;
  color: #2ad181;
  cursor: pointer;
}
.regist:hover {
  color: #95e8c0;
  transition: all 0.3s;
}
</style>
